import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import React, { useState, useEffect } from 'react';
import http from '../../utils/http';
import styles from './index.module.css';
import { Search, DropdownMenu } from 'react-vant';

const Index: React.FC = () => {
  const [value1, setValue1] = useState('');
  const [value, setValue] = useState<Record<string, string | number>>({})
  const navigate = useNavigate();
  const back = () => {
    navigate('/');
  };

  const handSearch = async () => {
    // 调用获取数据函数来发起搜索请求
    await fetchData();
  };
  const option1 = [
    { text: '肿瘤科', value: 0 },
    { text: '种植科', value: 1 },
    { text: '超神波科', value: 2 },
    { text: '小儿神经内科', value: 3 },
    { text: '中医外科', value: 4 },
  ]
  const option2 = [
    { text: '北京', value: 'a' },
    { text: '江苏', value: 'b' },
    { text: '上海', value: 'c' },
    { text: '重庆', value: 'd' },
    { text: '南京', value: 'e' },
  ]
  const option3 = [
    { text: '默认排序', value: '1' },
    { text: '好评排序', value: '2' },
  ]
  interface Doctor {
    id: string;
    doctorname: string;
    doctorstate: string;
    sococity: string;
    socoadmin: string;
    socodescword: string;
    doctorgood: number;
    doctortime: number;
    doctorbrowse: number;
    doctorprice: number;
    socoimage: string;
    socolv: string;
  }

  // 跳医生详情页
  const toDetail = (item: Doctor) => {
    navigate(`/doctor/` + item.id, { state: item });
  };

  const [list, setList] = useState([]);

  // 调取接口
  const fetchData = async () => {
    const params: { name?: string } = {};
    if (value1.trim()) {
      params.name = value1;
    }
    const res = await http.get("/doctor/list", {
      params
    });
    const { code, data } = res.data;
    if (code === 20000) {
      setList(data);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div className={styles.root}>
      <div className={styles.nav}>
        <NavBar onBack={back}>问专家</NavBar>
      </div>
      <Search
        showAction
        actionText={<div onClick={() => handSearch()}>搜索</div>}
        value={value1}
        onChange={setValue1}
        placeholder="搜索医生、医院或疾病症状"
      />

      {/* 热门科室 */}
      <div className={styles.hotdepartment}>
        <h2>热门科室</h2>
      </div>
      <div className={styles.title}>
        <li>妇产科</li>
        <li>儿科</li>
        <li>皮肤科</li>
        <li>消化内科</li>
        <li>呼吸内科</li>
        <li>耳鼻喉科</li>
        <li>中医科</li>
        <li>肿瘤科</li>
      </div>
      <div>
        <DropdownMenu direction='up' value={value} onChange={v => setValue(v)}>
          <DropdownMenu.Item name='value1' options={option1} title='全部科室' />
          <DropdownMenu.Item name='value2' options={option2} title='全国' />
          <DropdownMenu.Item name='value3' options={option3} title='筛选' />
        </DropdownMenu>
      </div>


      {/* 医生列表 */}
      <div className={styles.doctorList}>
        {list.map((item: Doctor, index) => (
          <div className={styles.doctor} key={index}>
            <div key={index} onClick={() => toDetail(item)}>
              {/* 医生头像 */}
              <div className={styles.doctorInformation}>
                <div className={styles.avatar}>
                  <img src={item.socoimage} alt="" />
                </div>
              </div>
              {/* 医生信息 */}
              <div className={styles.doctorName}>
                <p>
                  <li className={styles.name}>{item.doctorname}</li>
                  <li className={styles.post}>{item.doctorstate}</li>
                  <li className={styles.logo}>{item.socolv}</li>
                </p>
                <p>
                  <li className={styles.hospital}>{item.sococity}</li>
                  <li className={styles.ke}>{item.socoadmin}</li>
                </p>
                <div className={styles.type}>
                  <li className={styles.photo}>图文咨询</li>
                  <li className={styles.phone}>电话咨询</li>
                  <li className={styles.video}>视频咨询</li>
                </div>
                <div className={styles.good}>擅长：{item.socodescword}</div>
                <div className={styles.assessment}>
                  <li>
                    好评率 <span className={styles.color}>{item.doctorgood}%</span>
                  </li>
                  <li>
                    锦旗 <span className={styles.color}>{item.doctortime}</span>
                  </li>
                  <li>
                    浏览人次{" "}
                    <span className={styles.color}>{item.doctorbrowse}</span>
                  </li>
                </div>
                <div className={styles.aboutPrice}>
                  <div className={styles.price}>
                    <div className={styles.priceNum}>
                      <li className={styles.q}>￥</li>
                      <li className={styles.num}>{item.doctorprice}</li>
                      <li className={styles.qi}>起</li>
                    </div>
                    <button>问医生</button>
                  </div>
                </div>
              </div>
              <div className={styles.ce}></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Index;